@use '../utils/box-shadow_variables';
@use '../utils/color_variables';
@use '../utils/size_variables';
@use '../core/box.scss';
@use '../core/columns.scss';
@use '../helper-classes/flexbox-and-grid.scss';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

label.box-label {
  cursor: pointer;
}

.box-label {
  @extend .box;
  @extend .is-centered;

  border-color: color_variables.$grey-light;
  border-radius: 3px;
  box-shadow: box-shadow_variables.$box-link-shadow;
  text-decoration: none;
  transition: box-shadow size_variables.$speed;
  width: 100%;

  > div:first-child {
    flex-grow: 1;
  }

  &.is-column {
    @extend .is-flex-column;
  }

  &.is-selected {
    box-shadow: box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle;

    .icon {
      color: color_variables.$grey;
    }
  }

  .icon {
    color: color_variables.$grey-light;
  }

  input[type='radio'] {
    display: none;
  }

  input[type='radio'] + label {
    border: 1px solid color_variables.$grey-light;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    margin: 1rem auto 0;
    height: 1rem;
    width: 1rem;
  }

  input[type='radio']:checked + label {
    background: color_variables.$blue;
    border: 1px solid color_variables.$blue;
    box-shadow: inset 0 0 0 0.15rem color_variables.$white;
  }
}

.box-label-header {
  color: color_variables.$grey;

  .is-selected & {
    color: color_variables.$grey-darkest;
  }
}
